<style>
    *{
        margin: 0;
        padding: 0;
    }
    /*body{*/
    /*    background: #00aaff;*/
    /*}*/
    .loading-box{
        position: fixed;
        left: 0;
        width: 100%;
        height: 100%;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99;
    }
    .loading{
        width: 100px;
        height: 20px;
        margin: auto;
        transform: scale(0.5);
        text-align: center;
        transform-origin: center center;
    }
    .loading span{
        display: inline-block;
        width: 8px;
        height: 100%;
        margin: 0 2px;
        border-radius: 4px;
        background: #8124ff;
        -webkit-animation: load 1s ease infinite;
    }
    @-webkit-keyframes load{
        0%,100%{
            height: 20px;
            margin: 0 2px;
            background: #8124ff;
        }
        50%{
            height: 50px;
            margin: -15px 2px;
            background: #fd075e;
        }
    }
    .loading span:nth-child(2){
        -webkit-animation-delay:0.2s;
    }
    .loading span:nth-child(3){
        -webkit-animation-delay:0.4s;
    }
    .loading span:nth-child(4){
        -webkit-animation-delay:0.6s;
    }
    .loading span:nth-child(5){
        -webkit-animation-delay:0.8s;
    }
</style>
<div class="loading-box">
    <div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>